<template>
  <div class="home-container">
    <!-- 核心数据卡片 -->
    <div class="data-cards">
      <el-row :gutter="20">
        <el-col
          v-for="item in stats"
          :key="item.title"
          :xs="24"
          :sm="12"
          :lg="6"
        >
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" :style="{ background: item.color }">
                <el-icon :size="24"><component :is="item.icon" /></el-icon>
              </div>
              <div class="card-text">
                <div class="value">{{ item.value }}</div>
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表与操作区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 趋势图表 -->
      <el-col :xs="24" :lg="16">
        <el-card shadow="hover" class="chart-card">
          <div class="chart-header">
            <h3>房源新增趋势</h3>
            <el-radio-group v-model="chartType"> </el-radio-group>
          </div>
          <div ref="chartEl" style="height: 320px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, shallowRef } from "vue";
import * as echarts from "echarts";
import { House, User, Star, Bell } from "@element-plus/icons-vue";
import api from "@/api";

// 核心数据
const stats = ref([
  { title: "总房源数", value: "加载中...", icon: House, color: "#409eff" },
  { title: "活跃租客", value: "加载中...", icon: Bell, color: "#67c23a" },
  { title: "总反馈数", value: "加载中...", icon: User, color: "#e6a23c" },
  { title: "总新闻数", value: "加载中...", icon: Star, color: "#f56c6c" },
]);

// 图表相关
const chartEl = shallowRef(null);
const chartType = ref("week");
let chartInstance = null;

onMounted(async () => {
  try {
    const [houseCountRes, feedbackCountRes, newsCountRes, userCountRes] =
      await Promise.all([
        api.house.selectHouseCount(),
        api.feedback.selectFeedbackCount(),
        api.news.selectNewsCount(),
        api.user.selectUserCount(),
      ]);
    console.log(houseCountRes.data);
    stats.value[0].value = houseCountRes.data;
    stats.value[1].value = userCountRes.data;
    stats.value[2].value = feedbackCountRes.data;
    stats.value[3].value = newsCountRes.data;
  } catch (error) {
    console.error("获取数据失败:", error);
    stats.value.forEach((item) => (item.value = "获取失败"));
  }

  if (chartEl.value) {
    chartInstance = echarts.init(chartEl.value);
    await updateChart(); // Call updateChart here
  }
});

const updateChart = async () => {
  try {
    const response = await api.house.findNewHousesCountByDayThisWeek();
    const dataForChart = response.data.map((item) => ({
      day: new Date(item.day).toLocaleDateString(),
      new_houses_count: item.new_houses_count,
    }));
    const xAxisCategories = dataForChart.map((item) => item.day);
    const option = {
      tooltip: { trigger: "axis" },
      xAxis: {
        type: "category",
        data: xAxisCategories,
      },
      yAxis: { type: "value" },
      series: [
        {
          data: dataForChart.map((item) => item.new_houses_count),
          type: "line",
          smooth: true,
          areaStyle: { color: "#409eff33" },
          lineStyle: { color: "#409eff" },
        },
      ],
    };
    chartInstance.setOption(option);
  } catch (error) {
    console.error("Failed to fetch or process data for chart:", error);
  }
};
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.data-cards {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
  padding: 12px;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.card-text .value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.card-text .title {
  color: #666;
  font-size: 14px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* 新增样式让趋势图表左右居中 */
.main-content {
  justify-content: center;
}

/* 删除无用样式 */
/* 移除了 quick-actions, action-buttons, .action-buttons .el-button, .mt-20 相关样式 */

@media (max-width: 768px) {
  .card-content {
    flex-direction: column;
    text-align: center;
  }

  .card-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
}
</style>
